<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本使用</title>
</head>

<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
        // 中奖弹出   恭喜恭喜   显示中奖号码
        // 未中奖弹出  再接再厉  显示数字

        //获取按钮
        let btn = document.querySelector('#btn');

        //绑定事件
        // btn.onclick = function(){
        //     setTimeout(() => {
        //         //生成一个从 1-100 的随机数
        //         let num = rand(1, 100);
        //         //判断
        //         if(num <= 30){
        //             alert('恭喜恭喜, 您的中奖号码为 ' + num);
        //         }else{
        //             alert('再接再厉, 您的号码为 '+ num);
        //         }
        //     }, 2000);
        // }

        // Promise  
        btn.onclick = function(){
            //使用 Promise     resolve 解决   reject 拒绝
            let p = new Promise((resolve, reject) => {
                //包裹异步任务
                setTimeout(() => {
                    //生成一个从 1-100 的随机数
                    let num = rand(1, 100);
                    //判断
                    if(num <= 30){
                        resolve(num);//成功的状态
                    }else{
                        reject(num);//失败的状态
                    }
                }, 2000);
            });

            //调用 then 方法  then 然后
            // value 值   reason 原因
            p.then((value) => {
                alert('恭喜恭喜 您的中奖号码为' + value)
            }, (reason) => {
                alert('再接再厉! 您的号码为' + reason);
            }); 

        }


        
    </script>
</body>

</html>